require(['./config'], () => {
  require(['template', 'jquery', 'header', 'footer', 'bootstrap'], (template) => {
    class Shop {
      constructor () {
        this.Init().then(() => {
          this.checkboxInit()

          this.isdelete = false
          this.checkboxChange()
          this.btnChange()
          this.delete()
          this.deleteAll()
          this.checkAll()
        })
      }

      Init () {
        return new Promise((resolve) => {
          const goodsList = localStorage.getItem('books')
          if (goodsList) {
            this.goodsList = JSON.parse(goodsList)
            $('.goods-content').html(template('goods-content-template', {
              books: this.goodsList
            }))
          } else {
            // 如果没有数据就隐藏购物车的数据，换成一个其他的内容
          }
          // this.deleteGoods = null

          resolve()
        })
      }

      checkAll () {
        // 连接两个全选
        const _this = this
        $('#check-goods-all').on('change', function() {
          if(this.checked) {
            $('#checked-all-bottom').prop('checked', true)
          } else {
            $('#checked-all-bottom').prop('checked', false)
          }
          _this.checkedAll(this.checked)
        })
        $('#checked-all-bottom').on('change', function() {
          if(this.checked) {
            $('#check-goods-all').prop('checked', true)
          } else {
            $('#check-goods-all').prop('checked', false)
          }
          _this.checkedAll(this.checked)
        })
      }

      checkboxChange () {
        const _this = this
        $('.goods-list-item').on('change', function() {
          const tmpCheckEl = $(this)
          const parents = tmpCheckEl.parents('.goods-item')
          _this.checkedChange(tmpCheckEl.prop('checked'), parents)
          console.log(tmpCheckEl.prop('checked'))
          _this.checkIsAll()
          const id = parents.data('id')
          _this.goodsList = _this.goodsList.map(book => {
            if (book.bookId == id) {
              book.check = $(this).prop('checked')
            }
            return book
          })
          localStorage.setItem('books', JSON.stringify(_this.goodsList))
        })
      }

      checkboxInit () {
        const bool = this.goodsList.every((item) => {
          return item.check
        })
        console.log(bool)
        if (bool) {
          $('#check-goods-all').prop('checked', bool)
          $('#checked-all-bottom').prop('checked', bool)
        }
        const money = this.goodsList.reduce((money, shop) => {
          if (shop.check) {
            money += shop.price * shop.count
          }
          return money
        }, 0)
        const count = this.goodsList.reduce((count, shop) => {
          if (shop.check) {
            count += shop.count
          }
          return count
        }, 0)
        $('#selectGoodsCount').html(count)
        $('#selectGoodsMoney').html(money)
      }

      checkIsAll () {
        var checkLen = $('.goods-list-item:checked').length
        if (checkLen > 0) {
          $('.submitData').removeClass('submitDis')
        } else {
          $('.submitData').addClass('submitDis')
        }
        if($('.goods-item').length === checkLen) {
          $('#checked-all-bottom, #check-goods-all').prop('checked', true)
        } else {
          $('#checked-all-bottom, #check-goods-all').prop('checked', false)
        }
      }

      checkedChange (isChecked, parents) {
        // if(isChecked === undefined) {
        //   // 获取checked属性
        //   var isChecked = parents.find('.goods-list-item')[0].checked 
        // }
        // 获取单种商品的总价
        var itemTotalMoney = parseFloat(parents.find('.single-total').text())
        // 获取全部商品总价
        var GoodsTotalMoney = parseFloat($('#selectGoodsMoney').text())
        // 获取单种商品总数
        var itemCount = parseInt(parents.find('.goods-count').val())
        // 获取全部商品总数
        var goodsTotalCount = parseInt($('#selectGoodsCount').text())
        if(isChecked) {
          $('#selectGoodsMoney').empty().append(itemTotalMoney + GoodsTotalMoney)
          $('#selectGoodsCount').empty().append(itemCount + goodsTotalCount)
        } else {
          if (GoodsTotalMoney - itemTotalMoney === 0) {
            $('#selectGoodsMoney').empty().append('0.00')
            if (!$('.submitData').hasClass('submitDis')) {
              $('.submitData').addClass('submitDis')
            }
          } else {
            $('#selectGoodsMoney').empty().append(GoodsTotalMoney - itemTotalMoney)
          }
          $('#selectGoodsCount').empty().append(goodsTotalCount - itemCount)
        }
      }

      btnChange () {
        const _this = this
        $('.goods-content').on('click', '.car-add', function() {
          var elInput = $(this).parents('.input-group').find('.goods-count')
          const parents = elInput.parents('.goods-item')
          const singlePrice = parseFloat(parents.find('.single-price').text())
          _this.showCount(elInput, true, parents, parseInt(elInput.val()), singlePrice)
          _this.computeGoodsMoney(parents, parseInt(elInput.val()), singlePrice)
        })
        $('.goods-content').on('click', '.car-decrease', function() {
          var elInput = $(this).parents('.input-group').find('.goods-count')
          const parents = elInput.parents('.goods-item')
          const singlePrice = parseFloat(parents.find('.single-price').text())
          _this.showCount(elInput, false, parents, parseInt(elInput.val()), singlePrice)
          _this.computeGoodsMoney(parents, parseInt(elInput.val()), singlePrice)
        })
      }

      showCount (elInput, isAdd, parents, count, singlePrice) {
        var isChecked = parents.find('.goods-list-item')[0].checked
        var GoodsTotalMoney = parseFloat($('#selectGoodsMoney').text())
        var goodsTotalCount = parseInt($('#selectGoodsCount').text())
        if(elInput) {
          if(isAdd) {
            ++count
            if(isChecked) {
              $('#selectGoodsMoney').empty().append(GoodsTotalMoney + singlePrice)
              $('#selectGoodsCount').empty().append(goodsTotalCount + 1)
            }
          } else {
            if(parseInt(count) <= 1) {
              return
            } else {
              --count
              if(isChecked) {
                $('#selectGoodsMoney').empty().append(GoodsTotalMoney - singlePrice)
                $('#selectGoodsCount').empty().append(goodsTotalCount - 1)
              }
            }
          }
          elInput.val(count)
        }
        console.log(count)
        const id = parents.data('id')
        this.goodsList = this.goodsList.map(book => {
          if (book.bookId == id) {
            book.count = count
          }
          return book
        })
        localStorage.setItem('books', JSON.stringify(this.goodsList))
      }

      computeGoodsMoney (parents, count, singlePrice) {
        var moneyCount = count * singlePrice
        var singleTotalEl = parents.find('.single-total')
        singleTotalEl.empty().append(moneyCount)
      }

      delete () {
        const _this = this
        $('.goods-content').on('click', '.item-delete', function() {
          const elInput = $(this).parents('.goods-item').find('.goods-list-item')
          const parents = elInput.parents('.goods-item')
          _this.isdelete = parents
          $('#deleteItemTip').modal('show')
        })

        $('.deleteSure').on('click', () => {
          if(this.isdelete !== null) {
            this.deleteGoods(this.isdelete)
          }
          $('#deleteItemTip').modal('hide')
        })
      }

      deleteAll () {
        $('#deleteMulty').on('click', function() {
          if($('.goods-list-item:checked').length <= 0) {
            $('#selectItemTip').modal('show')
          } else {
            $('#deleteMultyTip').modal('show')
          }
        })
        $('.deleteMultySure').on('click', () => {
          for (var i = 0; i < $('.goods-list-item:checked').length; i++) {
            const elInput = $('.goods-list-item:checked').eq(i).parents('.goods-item').find('.goods-list-item')
            const parents = elInput.parents('.goods-item')
            this.deleteGoods(parents)
            i--
          }
          this.checkOptions()
          $('#deleteMultyTip').modal('hide')
        })
      }

      deleteGoods (parents) {
        const isChecked = parents.find('.goods-list-item')[0].checked
        if(isChecked) {
          this.checkedChange(false, parents)
        }
        parents.remove()
        this.checkOptions()
        const id = parents.data('id')
        console.log(id)
        this.goodsList = this.goodsList.filter(book => book.bookId != id )
        console.log(this.goodsList.length)
        if (this.goodsList.length == 0) {
          localStorage.removeItem("books")
        } else {
          localStorage.setItem('books', JSON.stringify(this.goodsList))
        }
      }

      checkOptions ()  {
        if ($('#check-goods-all')[0].checked) {
          if ($('.goods-list-item').length <= 0) {
            $('#checked-all-bottom, #check-goods-all').prop('checked', false)
          }
        }
      }

      checkedAll(ischeck) {
        if ($('.goods-item').length <= 0) {
          $('.submitData').addClass('submitDis')
        } else {
          $('.submitData').removeClass('submitDis')
        }
        for(var i = 0; i < $('.goods-item').length; i++) {
          var elInput = $('.goods-item').eq(i).find('.goods-list-item')
          var isChecked = $('.goods-item').eq(i).find('.goods-list-item')[0].checked
          const parents = $('.goods-item').eq(i)
          console.log(parents)
          if(ischeck) {
            if(!isChecked) {
              elInput.prop('checked', true)
              this.checkedChange(true, parents)
            }
          } else {
            if (!$('.submitData').hasClass('submitDis')){
              $('.submitData').addClass('submitDis')
            }
            if(isChecked) {
              elInput.prop('checked', false)
              this.checkedChange(false, parents)
            }
          }
        }
      }

    }
    new Shop()
    
  })
})